<template>
  <div>
    <h2>楼层人数情况</h2>
    <div id="two"  style="width: 500px;height:200px;">
      容纳后期的图表
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import http from "../util/api";
import * as echarts from 'echarts';
type EChartsOption = echarts.EChartsOption;

var option: EChartsOption;
onMounted(() => {
  // 获取到标签
  var chartDom = document.getElementById('two')!;
  var myChart = echarts.init(chartDom);

  http('/chartDataTwo').then((res: any) => {
     console.log(res.data.num.一般访客);

    let ydata = res.data.num.一般访客//一般访客人数
    let xdata = res.data.day//星期几
    console.log(ydata);

    option = {
      xAxis: {
        data: xdata
      },
      yAxis: {},
      series: [
        {
          data: ydata,
          type: 'line',
          smooth: true
        }
      ],
      grid: {
        top: "10%",
        left: "5%",
        bottom: "5%",
        right: "5%",
        containLabel: true

      },
    };
    option && myChart.setOption(option);
  })
})


</script>
<style scoped>
h2 {
  /* 48像素 */
  height: 0.6rem;
  color: #fff;
  line-height: 0.6rem;
  text-align: center;
  font-size: 0.25rem;
}

/* ::v-deep h2{
    background-color: #999;

} */
#two {
  /* 高度360 */
  height: 4.3rem;
  
  margin: 0 auto;
  background-color: #785d5d;
}
</style>

